<template>
  <div v-if="detailObj">
      <p class="total-times">
        <span>{{title}}</span>
        <el-tooltip placement="top">
          <div class="bhAnalysis-tooltip-txt" slot="content">
              <template v-if="type === 'totalCount'">
                {{ $t('product.qrcode.text.text35') }}<br />
                {{ $t('product.qrcode.text.text36') }}<br />
                {{ $t('product.qrcode.text.text37') }}<br />
                {{ $t('product.qrcode.text.text38') }}<br />
              </template>
              <template v-else-if="type === 'totalPeople'">
                {{ $t('product.qrcode.text.text39') }}<br />
                {{ $t('product.qrcode.text.text40') }}<br />
                {{ $t('product.qrcode.text.text41') }}<br />
                {{ $t('product.qrcode.text.text42') }}<br />
              </template>
              <template v-else-if="type === 'mostModule'">
                {{ $t('product.qrcode.text.text43') }}<br />
                {{ isAll ? $t('product.qrcode.text.text43') : $t('product.qrcode.text.text44') }}<br />
                {{ $t('product.qrcode.text.text45') }}<br />
                {{ $t('product.qrcode.text.text46') }}<br />
                {{ $t('product.qrcode.text.text47') }}<br />
              </template>
          </div>
          <span class="iconfont icon-tip"></span>
        </el-tooltip>
      </p>
      <span class="total-num" :class="{'total-num-size': type === 'mostModule' && detailObj.title}">{{detailObj.title || emptyTitle}}</span>
      <div class="percent-detail">
        <div class="data-detail">
          <IndicatorItem :title="$t('common.time.day1')" :percentage="detailObj.dayChange.percentage" :trend="detailObj.dayChange.trend"></IndicatorItem>
        </div>
        <div class="data-detail">
          <IndicatorItem :title="$t('common.time.week')" :percentage="detailObj.weekChange.percentage" :trend="detailObj.weekChange.trend"></IndicatorItem>
        </div>
        <div class="data-detail">
          <IndicatorItem :title="$t('common.time.month')" :percentage="detailObj.monthChange.percentage" :trend="detailObj.monthChange.trend"></IndicatorItem>
        </div>
      </div>
  </div>
</template>
<script>
import IndicatorItem from './IndicatorItem.vue'
import i18n from '@src/locales';
export default {
  props:{
    title:{
      type:String,
      default: i18n.t('product.qrcode.text.text48')
    },
    detailObj:{
      type:Object,
      default:()=>{}
    },
    // 无状态展示数据
    emptyTitle:{
      type: String,
      default: '0'
    },
    type: {
      type: String,
      require: true
    },
    isAll: {
      type: Boolean,
      rdefault: true
    }
  },
  data() {
    return {
    }
  },
  components: {
    IndicatorItem
  },
  methods:{

  }
}
</script>
<style lang="scss">
  .total-times {
    font-size: 14px;
    margin-bottom: 0;
    color: #262626;
    display: flex;
    align-items: center;
    >span {
      margin-right: 8px;
    }
    .el-tooltip{
      font-size: 14px;
      color: #595959;
    }
  }
  .total-num {
    font-size: 30px;
    font-family: Helvetica;
    display: block;
    line-height: 48px;
  }
  .total-num-size {
    font-size: 18px;
  }
  .percent-detail {
    margin: 14px 0;
    font-size: 12px;
    .data-detail {
      color:#8C8C8C;
      margin: 4px 0;
      .detail-item {
      width: 94px;
      display: flex;
      justify-content: space-between;
      }
      .percent-icon {
        width: 0;
        height: 0;
        border-style: solid;
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
      }
      .increase-num {
        color:#FF4D4F;
        .percent-icon {
          border-color: #FF4D4F transparent transparent transparent;
          border-width: 5px 4px 0 4px;
        }
      }
      .reduce-num {
        color: #52C41A;
        .percent-icon {
          border-color: transparent transparent #52C41A transparent;
          border-width: 0 4px 5px 4px;
        }
      }
    }
  }
</style>
